<template>
	<view class="mine">
		<!-- 顶部导航栏 -->
		<!-- #ifndef MP-WEIXIN -->
		<navBar title="个人中心" :home="true"></navBar>
		<!-- #endif -->
		<!-- 主体部分 -->
		<view class="my-body" v-if="user">
			<view class="profilebox"><image :src="user.avatar" mode=""></image></view>
			<!-- 个人信息列表 -->
			<view class="msgbox">
				<!-- 发表博客数 -->
				<view class="middlebox">
					<view class="txtbody">{{ user.blogCount }}</view>
					<view class="txttitle">博客数</view>
				</view>
				<!-- 关注数 -->
				<view class="middlebox">
					<view class="txtbody">{{ user.followCount }}</view>
					<view class="txttitle">关注</view>
				</view>
				<!-- 粉丝数 -->
				<view class="middlebox">
					<view class="txtbody">{{ user.fanCount }}</view>
					<view class="txttitle">粉丝</view>
				</view>
			</view>
			<!-- 个人资料列表 -->
			<view class="msgperson">
				<!-- 姓名 -->
				<text>{{ user.name }}</text>
				<!-- 个性签名 -->
				<text>{{ user.desc }}</text>
			</view>
			<!-- 个人功能列表 -->
			<view class="function-list">
				<u-grid col="4">
					<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22" @click="click(listItem.name, listIndex)"></u-icon>
						<text class="grid-text">{{ listItem.title }}</text>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
		</view>
		<!-- 弹出层：赞过 -->
		<u-popup :show="trumbshow" @close="trumbclose">
			<view class="all-trumbs-box" v-if="trumbshow">
				<view class="u-page">
					<u-list>
						<u-list-item v-for="(item, index) in all_trumb_blogs" :key="index">
							<u-cell :title="item.blog.title" @click="jumpToDetails(item.blogId)">
								<u-avatar slot="icon" shape="square" size="35" :src="item.blog.cover" customStyle="margin: -3px 5px -3px 0"></u-avatar>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
			</view>
		</u-popup>
		<!-- 弹出层：我的所有博客 -->
		<u-popup :show="selfshow" @close="selfclose">
			<view class="all-trumbs-box" v-if="selfshow">
				<view class="u-page">
					<u-list>
						<u-list-item v-for="(item, index) in all_self_blogs" :key="index">
							<u-cell :title="item.title" @click="jumpToDetails(item.id)">
								<u-avatar slot="icon" shape="square" size="35" :src="item.cover" customStyle="margin: -3px 5px -3px 0"></u-avatar>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
			</view>
		</u-popup>
		<!-- 弹出层：历史记录 -->
		<u-popup :show="historyshow" @close="historyclose">
			<view class="all-trumbs-box" v-if="historyshow">
				<view class="u-page">
					<u-list>
						<u-list-item v-for="(item, index) in all_history_blogs" :key="index">
							<u-cell :title="item.Blog.title" @click="jumpToDetails(item.blogId)">
								<u-avatar slot="icon" shape="square" size="35" :src="item.Blog.cover" customStyle="margin: -3px 5px -3px 0"></u-avatar>
							</u-cell>
						</u-list-item>
					</u-list>
				</view>
			</view>
		</u-popup>
		<!-- 弹出层：编辑个人信息 -->
		<u-popup :show="editshow" @close="editclose">
			<view class="all-trumbs-box" v-if="editshow">
				<view class="form-box">
					<u--form labelWidth="80" :model="form" :rules="rules" ref="form" :labelStyle="{ paddingLeft: '5px' }">
						<!-- 头像 -->
						<u-form-item prop="cover" label="头像" borderBottom required>
							<u-upload border="surround" :maxCount="1" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1"></u-upload>
						</u-form-item>
						<!-- 昵称 -->
						<u-form-item prop="name" label="昵称" borderBottom required>
							<u--input placeholder="请输入昵称" border="surround" v-model="form.name"></u--input>
						</u-form-item>
						<!-- 个性签名 -->
						<u-form-item prop="motto" label="个性签名" required>
							<u--textarea confirmType="done" placeholder="请输入个性签名" border="surround" v-model="form.motto"></u--textarea>
						</u-form-item>
						<view class="btn">
							<view class="change" @click="upData"><u-button type="primary" text="确认"></u-button></view>
							<view class="unChange" @click="jump"><u-button type="warning" text="取消"></u-button></view>
						</view>
					</u--form>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { userMsg, getLoveBlog, getSelfBlog, getHistory, editUserMsg } from '@/config/api.js';
export default {
	data() {
		return {
			trumbshow: false,
			selfshow: false,
			historyshow: false,
			editshow: false,
			user: null,
			all_trumb_blogs: null,
			all_self_blogs: null,
			all_history_blogs: null,
			list: [
				{
					name: 'thumb-up',
					title: '赞过'
				},
				{
					name: 'account',
					title: '我的博客'
				},
				{
					name: 'clock',
					title: '历史记录'
				},

				{
					name: 'edit-pen',
					title: '编辑'
				}
			],
			indexList: [],
			urls: [
				'https://cdn.uviewui.com/uview/album/1.jpg',
				'https://cdn.uviewui.com/uview/album/2.jpg',
				'https://cdn.uviewui.com/uview/album/3.jpg',
				'https://cdn.uviewui.com/uview/album/4.jpg',
				'https://cdn.uviewui.com/uview/album/5.jpg',
				'https://cdn.uviewui.com/uview/album/6.jpg',
				'https://cdn.uviewui.com/uview/album/7.jpg',
				'https://cdn.uviewui.com/uview/album/8.jpg',
				'https://cdn.uviewui.com/uview/album/9.jpg',
				'https://cdn.uviewui.com/uview/album/10.jpg'
			],
			form: {
				name: '',
				motto: '',
				cover: '',
				classifyArr: null
			},
			rules: {
				name: {
					required: true,
					message: '请输入用户名',
					trigger: ['change', 'blur']
				},
				motto: {
					required: true,
					message: '请输入个性签名',
					trigger: ['change', 'blur']
				},
				cover: {
					required: true,
					message: '请上传头像',
					trigger: ['change']
				}
			},
			fileList1: []
		};
	},
	onLoad() {
		//	如果用户没有登陆，则跳转到登陆
		if (!this.userInfo) {
			uni.redirectTo({
				url: '/subpages/login/login'
			});
		} else {
			this.initMsg();
		}
	},
	onShow() {
		console.log('onshow被调用了');
		this.all_trumb_blogs = null;
		this.all_self_blogs = null;
		this.all_history_blogs = null;
		this.allTrumbs();
		this.allSelf();
		this.allHistory();
		// this.allHistory();
	},
	methods: {
		...mapMutations(['clearUser']),
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 修改用户信息接口
		async upData() {
			console.log(this.form.cover, this.form.name, this.form.motto, this.userInfo.token);
			const userData = await editUserMsg(this.form.name, this.form.cover, this.form.motto, this.userInfo.token);
			console.log(userData);
			if (userData.code !== 200) {
				uni.showToast({
					title: '修改失败',
					duration: 2000
				});
			}
			uni.showToast({
				title: '修改成功',
				duration: 2000
			});
			this.editshow = false;
			this.initMsg();
		},
		// 上传用户要修改的头像
		async afterRead(data) {
			const imgStatus = {
				status: 'uploading',
				message: '上传中'
			};
			this.fileList1.push(imgStatus);
			console.log(data);
			await uni.uploadFile({
				url: 'https://eggblog.bluej.cn/api/imgUpload',
				filePath: data.file.url,
				name: 'file',
				header: {
					'x-token': this.userInfo.token
				},
				success: res => {
					const fileData = JSON.parse(res.data);

					this.$set(this.fileList1, 0, {
						status: 'success',
						url: fileData.data[0]
					});
					// 将图片上传后的URL保存到表单信息中
					this.form.cover = fileData.data[0];
					console.log(this.form.cover, fileData.data[0]);
				}
			});
		},
		jump() {
			uni.switchTab({
				url: '/pages/my/my'
			});
		},
		// 编辑个人信息
		async edit() {
			console.log(this.user);
			// const changeMsg = await editUserMsg('原子酱', '@/static/fuko.jpeg', '我怎么还在做项目', this.userInfo.token);
			// console.log(changeMsg);
		},
		// 跳转至详情页
		jumpToDetails(id) {
			// console.log(id);
			uni.navigateTo({
				url: '/subpages/details/details?blogid=' + id
			});
		},
		// 初始化浏览记录
		async allHistory() {
			if (this.all_history_blogs) return;
			const history = await getHistory(this.userInfo.token);
			if (history.code == 200) {
				this.all_history_blogs = history.data.rows;
				// console.log(this.all_history_blogs);
			}
		},
		// 初始化所有自己的博客
		async allSelf() {
			if (this.all_self_blogs) return;
			const self = await getSelfBlog(this.userInfo.token);
			// console.log(self);
			if (self.code == 200) {
				this.all_self_blogs = self.data.rows;
			}
			// console.log(this.all_self_blogs);
		},
		// 初始化所有点赞过的博客
		async allTrumbs() {
			// console.log(this.all_trumb_blogs);
			if (this.all_trumb_blogs) return;
			const trumbs = await getLoveBlog(this.userInfo.token);
			// console.log(trumbs);
			if (trumbs.code == 200) {
				this.all_trumb_blogs = trumbs.data.rows;
			}
			// console.log(this.all_trumb_blogs);
		},
		// 点击功能列表
		click(name, idx) {
			this.$refs.uToast.success(`点击了${name}`);
			// console.log(`通过控制${idx}来控制哪个弹出层弹出`);
			switch (idx) {
				case 0:
					this.allTrumbs();
					this.trumbshow = true;
					break;
				case 1:
					this.allSelf();
					this.selfshow = true;
					break;
				case 2:
					this.allHistory();
					this.historyshow = true;
					break;
				case 3:
					this.edit();
					this.editshow = true;
					break;
			}
		},
		// 赞过弹出层
		trumbclose() {
			this.trumbshow = false;
		},
		selfclose() {
			this.selfshow = false;
		},
		historyclose() {
			this.historyshow = false;
		},
		editclose() {
			this.editshow = false;
		},
		async initMsg() {
			const user = await userMsg(this.userInfo.id, this.userInfo.token);
			this.form.name = user.data.name;
			this.form.motto = user.data.desc;
			this.form.cover = user.data.avatar;
			// console.log(user);
			// 如果token过期,则拿？？？忘记是啥了
			if (user.msg == 'token已过期') {
				this.clearUser();
			}
			this.user = user.data;
			// console.log(this.user);
		}
	},
	computed: {
		...mapState(['userInfo'])
	}
};
</script>

<style lang="scss">
* {
	font-family: 'catstyle';
}
.mine {
	width: 100vw;
	height: 100%;
	background-color: lightgoldenrodyellow;
	.my-body {
		width: 93vw;
		height: 50vh;
		background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
		position: relative;
		left: 4%;
		top: 6%;
		border-radius: 9vw;
		overflow: hidden;
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
		.profilebox {
			width: 35vw;
			height: 35vw;
			border-radius: 50%;
			// background-color: darkblue;
			// border: brown 2px solid;
			position: absolute;
			left: 2%;
			top: 2%;
			overflow: hidden;
			> image {
				width: 120%;
				height: 100%;
			}
		}
		.msgbox {
			width: 55vw;
			height: 13vh;
			// background-color: blue;
			position: absolute;
			right: -1%;
			top: 6%;
			display: flex;
			justify-content: space-between;
			> .middlebox {
				width: 18vw;
				height: 100%;
				font-size: 5vw;
				font-weight: 600;
				text-align: center;
				border-right: 2px solid lightgrey;
				> .txttitle {
					width: 100%;
					height: 50%;
					color: grey;
				}
				> .txtbody {
					width: 100%;
					height: 50%;
				}
			}
		}
		.msgperson {
			position: absolute;
			left: 8%;
			bottom: 28%;
			> text {
				display: block;
				font-size: 5vw;
				line-height: 8vw;
				font-weight: 600;
			}
		}
		.function-list {
			width: 80%;
			margin: 3vw 9vw;
			position: absolute;
			left: 0%;
			bottom: 0%;
			.grid-text {
				font-size: 14px;
				color: #909399;
				padding: 10rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}
		}
	}
	.all-trumbs-box {
		width: 100%;
		height: 70vh;
		overflow: auto;
	}
}
.form-box {
	margin: 5vh auto;
	border-radius: 5vw;
	width: 85vw;
	padding: 20px;
	box-sizing: border-box;
	background-color: #fff;
}

.btn {
	margin-top: 5vh;
	width: 100%;
	display: flex;
	justify-content: space-around;

	> view {
		width: 35%;
	}
}
uni-page-body {
	height: 100%;
}
</style>
